<!-- ******环保数据****** -->
<template>
  <div class="first-hgcpkc">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/fadianchang.png" alt="" />
        环保数据
      </div>
      <div class="title-box-one">
        <ul style="background-color: #10306f">
          <li class="title-box-one1">1</li>
          <li class="title-box-one2">烟尘排放程度</li>
          <li class="title-box-one3">54.14</li>
        </ul>
        <ul style="background-color: #0e244a">
          <li class="title-box-one1">2</li>
          <li class="title-box-one2">二氧化硫排放浓度</li>
          <li class="title-box-one3">54.14</li>
        </ul>
        <ul style="background-color: #10306f">
          <li class="title-box-one1">3</li>
          <li class="title-box-one2">氮氧化物排放浓度</li>
          <li class="title-box-one3">54.14</li>
        </ul>
        <ul style="background-color: #0e244a">
          <li class="title-box-one1">4</li>
          <li class="title-box-one2">烟气排放量</li>
          <li class="title-box-one3">54.14</li>
        </ul>
        <ul style="background-color: #10306f">
          <li class="title-box-one1">5</li>
          <li class="title-box-one2">废水排放浓度</li>
          <li class="title-box-one3">54.14</li>
        </ul>
        <ul style="background-color: #0e244a">
          <li class="title-box-one1">6</li>
          <li class="title-box-one2">COD排放量</li>
          <li class="title-box-one3">43.66</li>
        </ul>
      </div>
      <div class="title-box-two">
        <p class="title-box-p">烟尘排放浓度</p>
        <p class="title-box-p1">单位：mg/m3</p>
        <div id="health"></div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
import eventBus from '@/EventBus';
export default {
  name: "first-electricity",
  data() {
    return {};
  },
  created() {
    eventBus.$on('send', (data1, data2, data3, data4, data5, data6) => {
      this.health(data6)
    })
  },
  mounted() {
    this.health();
  },
  methods: {
    health(data6) {
      let health = this.$echarts.init(document.getElementById("health"));
      window.addEventListener("resize", function () {
        health.resize();
      });
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 19200);
        return res * fontSize;
      }
      health.setOption({
        legend: [
          {
            data: ["本月"],
            top: "25",
            x: "60%",
            itemWidth: fontSize(1.4),
            itemHeight: fontSize(1),
            borderColor: "rgba(72, 130, 167, 1)",
            textStyle: {
              color: "#c1cadf",
              fontSize: fontSize(2),
              //   fontSize: 20,
            },
          },
          {
            data: ["上月"],
            top: "25",
            x: "70%",
            itemWidth: fontSize(1.4),
            itemHeight: fontSize(1),
            // itemWidth: 14,
            // itemHeight: 10,
            textStyle: {
              color: "#c1cadf",
              fontSize: fontSize(2),
              //   fontSize: 20,
            },
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          top: "5%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: "vertical",
          x: "right",
          y: "center",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            data: ["荆门动力", "齐鲁乙烯", "辽东热电", "广州二站", "广州一站"],
            axisLine: {
              lineStyle: {
                color: "rgba(51, 176, 255, 1)",
              },
            },
            axisLabel: {
              interval: 0,
              color: "rgba(207, 227, 252, 1)",
              fontSize: fontSize(2),
              //   fontSize: 20,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: true,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(51, 176, 255, 1)",
              },
              symbol: ["none", "arrow"],
              symbolSize: [fontSize(0.5), fontSize(1.2)],
              symbolOffset: [fontSize(0), fontSize(1)],
            },
            min: 0,
            // name: "单位：mg/m3",
            axisLabel: {
              interval: 0,
              color: "rgba(207, 227, 252, 1)",
              formatter: "{value} k",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(39, 57, 75, 1)",
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            label: {
              formatter: "{c}k",
              show: true,
              position: "top", // 位置
              color: "#FFF",
              fontSize: fontSize(1.4),
              //   fontSize: 14,
              fontWeight: "bold", // 加粗
              distance: 15, // 距离
            }, // 柱子上方的数值
            type: "bar",
            yAxisIndex: 0,
            name: "本月",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(72, 125, 222, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 121, 214, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            barWidth: "24%",
            data: data6 ? data6[0] : [112, 135, 113, 122, 132, 115, 118, 112],
          },
          {
            label: {
              show: true,
              position: "top", // 位置
              color: "#FFF",
              fontSize: fontSize(1.4),
              //   fontSize: 14,
              formatter: "{c}k",
              fontWeight: "bold", // 加粗
              distance: fontSize(1.5), // 距离
            }, // 柱子上方的数值
            type: "bar",

            yAxisIndex: 0,
            name: "上月",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(83, 185, 227, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(23, 44, 60, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            barWidth: "24%",
            data: data6 ? data6[1] : [115, 123, 142, 132, 132, 115, 157],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.first-hgcpkc {
  list-style-type: none;
  margin: 0;
  width: 100%;
  height: 3240px;
  //   background-size: 100% 100%;
  .title-box {
    width: 100%;
    height: 100%;
    .title {
      width: 2380px;
      margin-top: 110px;
      height: 217px;
      padding-left: 65px;
      line-height: 217px;
      font-size: 145px;
      color: #e3f6fa;
      background-color: #1a2a44;
      letter-spacing: 10px;
      // display: inline-block;
      vertical-align: middle;

      img {
        width: 145px;
      }
    }
  }
  .title-box-one {
    margin-top: 110px;
    width: 2013px;
    height: 920px;
    ul {
      padding: 0;
      width: 100%;
      margin: 0;
      line-height: 145px;
      background-color: #fff;
      height: 145px;
      .title-box-one1 {
        margin-top: 20px;
        text-align: center;
        line-height: 100px;
        width: 100px;
        height: 100px;
        color: #fff;
        background-color: #66a0ff;
        border-radius: 125px;
        font-size: 80px;
      }
      .title-box-one2 {
        width: 1000px;
        text-align: left;
      }
      li {
        list-style-type: none;
        float: left;
        font-size: 121px;
        text-align: center;
      }
    }
  }
  .title-box-two {
    float: left;
    width: 100%;
    height: 1995px;
    // background-color: rgb(202, 83, 83);

    .title-box-p {
      padding-top: 80px;
      font-size: 94px;
      font-weight: 700;
      width: 100%;
      //   height: 150px;
      margin: 0px;
      background-image: -webkit-linear-gradient(top, #ffffff, #bdd0f7, #70a1ff);

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;
      color: #7faeff;
    }
    .title-box-p1 {
      text-align: right;
      padding-right: 400px;
      font-size: 40px;
      width: 100%;
      margin: 0;
      color: #fff;
    }
  }
}
#health {
  width: 100%;
  height: 1573px;
}
</style>
